<section class="resetLoginPassword-container">
    <div ng-show="resetState === states.RECOVERY">
        <p class="alert alert-info wrap" translate-context="Info" translate>We will send a reset code to your <a class="bold" href="https://protonmail.com/support/knowledge-base/set-forgot-password-options/" target="_blank" title="This is the optional email you used when first creating an account. This is the same as your notification email that is used for sending alerts about new messages.">recovery email</a> to reset your password.</p>
        <form method="post" autocomplete="off" name="resetForm" role="form" novalidate ng-submit="resetForm.$valid && confirmResetLostPassword(resetForm)" class="pm_form pm_panel">
            <h3 class="text-center margin" translate-context="Info" translate>Reset Password</h3>
            <div class="margin">
                <label for="username" class="sr-only" translate-context="Action" translate>ProtonMail username to reset</label>
                <input
                    id="username"
                    autofocus=""
                    name="username"
                    type="text"
                    class="form-control"
                    placeholder-translate-context="Action"
                    placeholder-translate="ProtonMail username to reset"
                    ng-model="params.username"
                    required>
            </div>
            <div ng-messages="resetForm.username.$error" ng-show="resetForm.$submitted || resetForm.username.$dirty">
                <p ng-message="required" class="alert alert-danger" translate-context="Error" translate>Username required</p>
            </div>
            <div class="margin">
                <label for="recoveryEmail" class="sr-only" translate-context="Reset password" translate>Recovery email</label>
                <input
                    id="recoveryEmail"
                    name="recoveryEmail"
                    type="email"
                    class="form-control"
                    placeholder-translate-context="Reset password"
                    placeholder-translate="Recovery email"
                    ng-model="params.recoveryEmail"
                    required>
            </div>
            <div ng-messages="resetForm.recoveryEmail.$error" ng-show="resetForm.$submitted || resetForm.recoveryEmail.$dirty">
                <p ng-message="email" class="alert alert-danger" translate-context="Error" translate>Invalid recovery email</p>
            </div>
            <div class="loginForm-actions">
                <div class="loginForm-actions-column">
                    <button class="loginForm-actions-main pm_button primary disabled-if-network-activity" type="submit" translate-comment="button to reset login password" translate-context="Action" translate>Reset Password</button>
                </div>
                <div class="loginForm-actions-row loginForm-actions-forgot-reset">
                    <link-website
                        class="pm_button link small"
                        data-link="username"></link-website>

                    <button type="button" ng-click="goToCode()" class="pm_button link small" translate translate-context="Action" translate-comment="Make sure this string is short please">Have a reset code?</button>
                </div>
            </div>
        </form>
    </div>

    <div ng-show="resetState === states.CODE">
        <p class="alert alert-info wrap" translate-context="Info" translate>We've sent a reset code to your <strong>recovery email</strong>, valid for one hour or until you request a new code. Enter it below to continue.</p>
        <form method="post" autocomplete="off" ng-submit="tokenForm.$valid && validateToken(tokenForm)" name="tokenForm" class="pm_form pm_panel" novalidate>
            <h3 class="text-center margin" translate-context="Title" translate>Reset Password</h3>
            <p class="alert alert-danger" translate-context="Error" translate>IMPORTANT: Do not close or navigate away from this page. You will need to enter the reset code into the field below once you receive it.</p>
            <div class="margin" ng-if="showTokenUsername">
                <label translate-context="Title" translate>Username:</label>
                <input
                autofocus=""
                name="username"
                type="text"
                class="form-control"
                placeholder-translate-context="Action"
                placeholder-translate="ProtonMail username to reset"
                ng-model="params.username"
                required>
            </div>
            <div ng-messages="tokenForm.username.$error" ng-show="tokenForm.$submitted || tokenForm.username.$dirty">
                <p ng-message="required" class="alert alert-danger" translate-context="Error" translate>Username required</p>
            </div>
            <div class="margin">
                <label for="resetToken" translate-context="Title" translate>Reset code:</label>
                <input
                    type="text"
                    ng-model="params.resetToken"
                    id="resetToken"
                    class="form-control"
                    name="resetToken"
                    placeholder-translate-context="Action"
                    placeholder-translate="Reset code"
                    required>
            </div>
            <div ng-messages="tokenForm.resetToken.$error" ng-show="tokenForm.$submitted || tokenForm.resetToken.$dirty">
                <p ng-message="required" class="alert alert-danger" translate-context="Error" translate>Reset code is required</p>
            </div>
            <div class="loginForm-actions">
                <div class="loginForm-actions-column">
                    <button type="submit" class="loginForm-actions-main pm_button primary disabled-if-network-activity" translate-comment="button to reset password" translate-context="Action" translate>Reset Password</button>
                </div>
            </div>
        </form>
    </div>

    <div ng-show="resetState === states.CHECKING">
        <div class="pm_form pm_panel text-center">
            <img src="/assets/img/logo/logo-purple.svg" height="34" alt="" /><br><br>
            <div class="creating-loader-container">
                <atom-loader data-loader-theme="primary"></atom-loader>
            </div>
            <p><span translate-context="Action" translate>Verifying reset code</span>...</p>
        </div>
    </div>

    <div ng-show="resetState === states.DANGER">
        <form method="post" autocomplete="off" ng-submit="confirmReset()" name="dangerForm" class="pm_form pm_panel">
            <h1 class="text-center" translate-context="Title" translate>Warning</h1>
            <p translate-context="Info" translate-comment="reset warning 1/3" translate>Resetting your password will also reset your encryption keys, so you will be unable to read your existing messages. <a href="https://protonmail.com/support/knowledge-base/updating-your-login-password/" target="_blank">Learn More</a>.</p>
            <p class="alert alert-danger" translate-comment="reset warning 2/3" translate-context="Info" translate>ALL YOUR DATA WILL BE LOST!</p>
            <label for="danger" class="label-block labelFix">
                <span translate-context="To continue, type DANGER below:" translate-comment="reset warning 3/3" translate>To continue, type</span>
                <kbd>{{dangerWord}}</kbd>
                <span translate-context="To continue, type DANGER below:" translate-comment="reset warning 3/3" translate>below:</span>
            </label>
            <p>
                <input type="text" id="danger" class="form-control" ng-model="params.danger" data-danger-word="dangerWord" data-danger />
            </p>
            <div class="alert alert-warning" ng-if="passwordMode === 1">
                <ul>
                    <li translate-context="reset password" translate>If you remember your old password later, you can recover your existing messages. <a href="https://protonmail.com/support/knowledge-base/restoring-encrypted-mailbox/" target="_blank">Learn More</a>.</li>
                </ul>
            </div>
            <div class="alert alert-warning" ng-if="passwordMode === 2">
                <ul>
                    <li translate-context="reset password" translate>Resetting either Login or Mailbox password will switch you to <a href="https://protonmail.com/support/knowledge-base/single-password/" target="_blank">Single Password Mode</a>.</li>
                    <li translate-context="reset password" translate>Resetting either Login or Mailbox password will make old messages unreadable.</li>
                    <li translate-context="reset password" translate>If you are resetting the Login password only, old messages can be recovered later if you know your existing Mailbox Password. <a href="https://protonmail.com/support/knowledge-base/restoring-encrypted-mailbox/" target="_blank">Learn More</a>.</li>
                </ul>
            </div>
            <div class="loginForm-actions">
                <div class="loginForm-actions-row">
                    <a ui-sref="login" class="pm_button" translate-context="Action" translate-comment="cancel reset process" translate>Cancel</a>
                    <button type="submit" ng-disabled="dangerForm.$invalid" class="pm_button error" title="Reset My Password" translate-context="Action" translate>Reset</button>
                </div>
            </div>
        </form>
    </div>

    <div ng-show="resetState === states.PASSWORD">
        <p>&nbsp;</p>
        <form method="post" ng-submit="passwordForm.$valid && resetPassword(passwordForm)" name="passwordForm" class="pm_form pm_panel" novalidate>
            <h3 class="text-center margin" translate-context="Title" translate>Reset Password</h3>
            <p class="text-center alert alert-danger" translate-context="Info" translate>Keep this password safe--it cannot be recovered.</p>
            <div class="form-group margin">
                <label for="password" translate-context="Title" translate>New password:</label>
                <password
                    data-id="password"
                    data-name="password"
                    data-form="passwordForm"
                    data-value="params.password"
                    placeholder-translate-context="Reset your password"
                    placeholder-translate="Choose a new password"></password>
            </div>
            <div class="form-group margin">
                <label for="passwordc" class="sr-only" translate-context="Reset your login" translate>Confirm new password</label>
                <password
                    data-id="passwordc"
                    data-name="passwordc"
                    data-form="passwordForm"
                    data-value="params.passwordConfirm"
                    placeholder-translate-context="Reset your login"
                    placeholder-translate="Confirm new password"
                    compare="params.password"></password>
            </div>
            <div class="alert alert-warning">
                <ul>
                    <li translate-context="Reset your login" translate>Do NOT forget this password. If you forget it, you will not be able to login or decrypt your messages.</li>
                    <li translate-context="Reset your login" translate>Save your password somewhere safe. Click on <i class="fa fa-eye"></i> icon to confirm that you have typed your password correctly.</li>
                </ul>
            </div>
            <div class="loginForm-actions margin-top">
                <div class="loginForm-actions-row">
                    <button type="submit" class="loginForm-actions-main pm_button error disabled-if-network-activity" translate-comment="button to reset password" translate-context="Action" translate>Reset password</button>
                </div>
            </div>
        </form>
    </div>

    <div class="pm_panel wide" ng-show="resetState === states.GENERATE">
        <div class="text-center header">
            <div class="creating-loader-container">
                <atom-loader data-loader-theme="primary"></atom-loader>
            </div>
            <h2 class="text-center" ng-show="!signupError" translate translate-context="Title">Generating keys...</h2>
        </div>
        <p class="alert" translate-context="Info" translate>This can take a few seconds or a few minutes depending on your device.</p>
    </div>

    <div class="pm_panel wide" ng-show="resetState === states.INSTALL" id="setUpProcess">
        <div class="text-center header">
            <div class="creating-loader-container">
                <atom-loader data-loader-theme="primary"></atom-loader>
            </div>
            <h2 class="text-center" translate-context="Title" translate>Resetting your password</h2>
        </div>
        <div class="wrapper text-left">
            <ol id="creationList">
                <li class="done">
                    <i class="show fa fa-check"></i>
                    <span translate-context="Title" translate>Generating keys</span>
                </li>
                <li ng-class="{ 'done': resetAccount }">
                    <i ng-class="{ 'show': resetAccount }" class="fa fa-check"></i>
                    <span translate-context="Title" translate>Resetting your password</span>
                </li>
                <li ng-class="{ 'done': logUserIn }">
                    <i ng-class="{ 'show': logUserIn }" class="fa fa-check"></i>
                    <span translate-context="Title" translate>Logging in to your account</span>
                </li>
                <li ng-class="{ 'done': redirectLogin }">
                    <i ng-class="{ 'show': redirectLogin }" class="fa fa-check"></i>
                    <span translate-context="Title" translate>Redirecting</span>
                </li>
            </ol>
        </div>
    </div>
</section>
